<template>
    <div class="mySong">
        <ul>
            <router-link :to="{path:'playSong',query:{songId:item.song_id}}" tag="li" v-for="(item,index) in song_list"
                :key="index">
                <h4> {{item.title}}</h4>
                <span> {{item.author}}</span>
            </router-link>
        </ul>
    </div>
</template>

<script>
    import {
        getSongList
    }
    from '../api/api';
    export default {
        props: ["type"],
        data() {
            return {
                list: [],
                billboard: [],
                song_list: [],
                songId: ''
            }
        },


        created() {
            getSongList(this.$route.query.type, 8).then(res => {
                this.billboard = res.billboard;
                this.song_list = res.song_list;
                this.songId = this.song_list[0].song_id;
            })
        },



        updated() {
            getSongList(this.$route.query.type, 8).then(res => {
                this.billboard = res.billboard;
                this.song_list = res.song_list;
                this.songId = this.song_list[0].song_id;
            })
        }
    }
</script>

<style lang="less" scoped>
    .mySong {
        width: 100%;
        padding: 20px 0;

        li {
            border-bottom: 1px solid #aaa;
        }
    }
</style>